<template>
  <div class="container">
    <div class="control">
      <div>
        <el-select placeholder="请选择农场" v-model="farm">
          <el-option v-for="iter of farmList" :key="iter.id" :label="iter.name" :value="iter.id" />
        </el-select>
        <el-select placeholder="请选择摄像头" v-model="search" clearable>
          <el-option v-for="iter of snapshot" :key="iter.id" :label="iter.title" :value="iter.id" />
        </el-select>
        <el-button v-if="list.every(iter => iter.id !== search)" @click="onAdd">添加</el-button>
        <el-button v-else type="danger" @click="onDel">删除</el-button>
      </div>
      <div>
        <el-select placeholder="请选择布局" v-model="grid">
          <el-option v-for="iter of gridList" :key="iter.value" :label="iter.label" :value="iter.value" />
        </el-select>
        <el-button type="primary" @click="fullscreen">全屏</el-button>
      </div>
    </div>
    <div class="wrapper" ref="list">
      <draggable class="list" :class="grid">
        <transition-group>
          <div v-for="iter of list" :key="iter.id" @dblclick="ondblclick(iter)">
            <MonitorVideo :monitor="iter" />
          </div>
        </transition-group>
      </draggable>
      <div class="full-size" v-if="video" @dblclick="video = null">
        <MonitorVideo :monitor="video" />
      </div>
    </div>
    <!-- <div class="head">
      <MonitorVideo ref="video" :data-item="video" />
      <div class="tag">
        <el-button @click="snap">截图</el-button>
      </div>
    </div>
    <div class="snapshots">
      <div class="item" v-for="(img, i) of snapshots" :key="i">
        <img :src="img" />
      </div>
    </div> -->
  </div>
</template>
<script>
import { getFarmList } from '@/api/farm'
import MonitorVideo from '@/components/MonitorVideo'
import SvgIcon from '@/components/SvgIcon/index.vue'
import request from '@/utils/request'
import screenfull from 'screenfull'
import draggable from 'vuedraggable'

export default {
  name: 'WorkMonitor',
  components: {
    MonitorVideo,
    draggable,
    SvgIcon
  },
  data() {
    return {
      farm: 5,
      farmList: [],
      grid: localStorage.getItem('jf-monitor-grid') || 'g2-3',
      gridList: [{ label: '两行三列', value: 'g2-3' },{ label: '三行三列', value: 'g3-3' }, { label: '一主七副', value: 'g1-7' }],
      video: null,
      search: '',
      snapshot: [],
      timer: null
    }
  },
  created() {
    this.init()
  },
  computed: {
    list() {
      localStorage.setItem('jf-monitor-grid', this.grid)
      switch (this.grid) {
        case 'g2-3':
          return this.snapshot.slice(0, 6)
        case 'g1-7':
          return this.snapshot.slice(0, 8)
        case 'g3-3':
          return this.snapshot.slice(0, 9)
      }
    }
  },
  watch: {
    farm() {
      this.getFarmMonitorList()
    },
    snapshot() {
      clearTimeout(this.timer)
      this.timer = setTimeout(this.getFarmMonitorList, 1000 * 60 * 60 * 24 * 10)
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  },
  methods: {
    async init() {
      this.farmList = await getFarmList()
      this.getFarmMonitorList()
    },
    getFarmMonitorList() {
      request({ url: '/api/v2/base/equip/equipmentCamera/getForLSD', params: { farm_id: this.farm } }).then(
        ({ data }) => {
          data.forEach(iter => {
            iter.title = iter.camera_name
            iter.code = iter.serial_number
            iter.url = iter.camera_url
            console.log(iter.camera_name)
            console.log(iter.camera_url)
          })
          this.snapshot = data
        }
      )
    },
    snap() {
      const video = this.$refs.video.$refs.video
      const { width, height } = video.getBoundingClientRect()
      const canvas = document.createElement('canvas')
      canvas.width = width
      canvas.height = height
      const ctx = canvas.getContext('2d')
      ctx.drawImage(video, 0, 0, width, height)
      this.snapshots.splice(this.snapshots.length, 0, canvas.toDataURL())
    },
    onAdd() {
      this.list.push(this.snapshot.find(iter => iter.id === this.search))
      console.log("onAdd")
      console.log(this.list)
    },
    onDel() {
      this.list.splice(this.snapshot.findIndex(iter => iter.id === this.search), 1)
      console.log("onDel")
      console.log(this.list)
    },
    fullscreen() {
      screenfull.request(this.$refs.list)
    },
    ondblclick(target) {
      if (screenfull.isFullscreen) {
        return screenfull.exit()
      }
      this.video = this.video ? (this.video.id !== target.id ? target : null) : target
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: white;

  .control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px;
  }

  .wrapper {
    position: relative;
    width: 100%;
    height: calc(100% - 48px);

    .list {
      width: 100%;
      height: 100%;
      span {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1px;
      }
      &.g3-3 span {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 1px;
      }
      &.g1-7 span {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
        > div:first-child {
          grid-column-start: 1;
          grid-column-end: 4;
          grid-row-start: 1;
          grid-row-end: 4;
        }
      }
    }

    .full-size {
      position: absolute;
      inset: 0;
      z-index: 9999;
    }
  }

  .head {
    width: 100%;
    height: 346px;
    min-height: 346px;
    position: relative;
    overflow: hidden;
    .tag {
      position: absolute;
      right: 32px;
      bottom: 32px;
    }
  }

  .snapshots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    .item {
      height: 160px;
      img {
        width: 320px;
        height: 100%;
        object-fit: fill;
      }
    }
  }
}
</style>
